import styles from "@styles/article.module.less";
import GeekIcon from "@shared/geekIcon";
import {
  useCollectArticleMutation,
  useUnCollectArticleMutation,
} from "@service/article";
import { useEffect } from "react";
import toast from "react-hot-toast";

interface Props {
  // 文章 id
  id: string | undefined;
  // 是否已经收藏的状态
  isCollect: boolean | undefined;
}

export default function Collect({ id, isCollect }: Props) {
  const [collectArticle, { isSuccess }] = useCollectArticleMutation();
  const [unCollectArticle] = useUnCollectArticleMutation();
  const collectHandler = () => {
    if (typeof id === "undefined" || typeof isCollect === "undefined") return;
    isCollect ? unCollectArticle(id) : collectArticle(id);
  };

  useEffect(() => {
    if (isSuccess) toast.success("收藏成功");
  }, [isSuccess]);

  return (
    <div className={styles.item} onClick={collectHandler}>
      <GeekIcon type={isCollect ? "iconbtn_collect_sel" : "iconbtn_collect"} />
      <span>收藏</span>
    </div>
  );
}
